<template>
  <div>
    <table class="table mt-3 table-bordered text-center">
      <thead>
        <tr>
          <th>是否赌博</th>
          <th>是否酗酒</th>
          <th>是否法院被执行</th>
          <th>是否失信被执行</th>
          <th>是否涉诉</th>
          <th>是否代偿</th>
          <th>五级分类</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{{ customerData.is_gamble === 1 ? '是' : '否' }}</td>
          <td>{{ customerData.is_drunk === 1 ? '是' : '否' }}</td>
          <td>{{ customerData.is_court_exe === 1 ? '是' : '否' }}</td>
          <td>{{ customerData.is_dis_list === 1 ? '是' : '否' }}</td>
          <td>{{ customerData.is_litigate === 1 ? '是' : '否' }}</td>
          <td>{{ customerData.is_comps === 1 ? '是' : '否' }}</td>
          <td>{{ riskStatus }}</td>
          <td>
            <el-button
              type="text"
              icon="el-icon-edit"
              class="py-0"
              @click="editVisible = true"
            ></el-button>
          </td>
        </tr>
      </tbody>
    </table>

    <el-dialog
      title="编辑客户状态"
      top="80px"
      width="800px"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="editVisible"
      :before-close="beforeClose"
    >
      <el-form ref="form" label-width="120px" :model="editData">
        <el-form-item label="是否赌博" prop="is_gamble">
          <c-radio-group :options="commonRadioOptions" v-model="editData.is_gamble"></c-radio-group>
        </el-form-item>
        <el-form-item label="是否酗酒" prop="is_drunk">
          <c-radio-group :options="commonRadioOptions" v-model="editData.is_drunk"></c-radio-group>
        </el-form-item>
        <el-form-item label="是否法院被执行" prop="is_court_exe">
          <c-radio-group
            :options="commonRadioOptions"
            v-model="editData.is_court_exe"
          ></c-radio-group>
        </el-form-item>
        <el-form-item label="是否失信被执行" prop="is_dis_list">
          <c-radio-group
            :options="commonRadioOptions"
            v-model="editData.is_dis_list"
          ></c-radio-group>
        </el-form-item>
        <el-form-item label="是否涉诉" prop="is_litigate">
          <c-radio-group
            :options="commonRadioOptions"
            v-model="editData.is_litigate"
          ></c-radio-group>
        </el-form-item>
        <el-form-item label="是否代偿" prop="is_comps">
          <c-radio-group :options="commonRadioOptions" v-model="editData.is_comps"></c-radio-group>
        </el-form-item>
        <el-form-item label="五级分类" prop="risk_type">
          <c-radio-group
            number-key
            :options="enumRiskStatus"
            v-model="editData.risk_type"
          ></c-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="btn-long" :loading="editLoading" @click="handleSubmit">
            保存
          </el-button>
          <el-button class="btn-long" :disabled="editLoading" @click="beforeClose">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { enumRiskStatus } from '@/credit/views/city/customer/blackList/mixins'

export default {
  components: {},
  props: {
    customerData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      editData: {
        is_gamble: 0,
        is_drunk: 0,
        is_court_exe: 0,
        is_dis_list: 0,
        is_litigate: 0,
        is_comps: 0,
        risk_type: 1,
      },
      commonRadioOptions: [
        { label: '否', value: 0 },
        { label: '是', value: 1 },
      ],
      enumRiskStatus,

      tableName: 'datum_customer_info_warehouse',
      editVisible: false,
      editLoading: false,
    }
  },
  computed: {
    farmId() {
      return this.customerData.customer_id
    },
    tableId() {
      return this.customerData.datum_customer_info_warehouse_id
    },
    riskStatus() {
      return enumRiskStatus[this.customerData.risk_type] || '-'
    },
  },
  watch: {
    farmId: {
      handler: function (val) {
        if (val) {
          this.init()
        }
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    beforeClose() {
      this.editVisible = false
    },

    init() {
      Object.keys(this.editData).forEach(key => {
        this.editData[key] = this.customerData[key]
      })
    },

    handleSubmit() {
      this.editLoading = true
      this.$api
        .updateData(this.$serviceName, this.tableName, this.tableId, this.editData)
        .then(res => {
          this.beforeClose()
          this.$emit('success', {
            res,
            data: this.editData,
          })
        })
        .finally(() => {
          this.editLoading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped></style>
